<template>
  <avue-tree :option="option"
             :data="data"
             :filter-node-method="filterNodeMethod"
             @update="update"
             @save="save"
             @del="del"
             v-model="form">
    <template #="{ node, data }">
      <span class="el-tree-node__label">
        <i class="el-icon-user-solid"></i>
        {{ (node || {}).label }}
      </span>
    </template>
    <template #menu="scope">
      <div class="avue-tree__item"
           @click="tip(scope.node,scope.data)">自定义按钮</div>
    </template>
  </avue-tree>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      data: [
        {
          value: 0,
          label: '一级部门',
          children: [
            {
              value: 1,
              label: '一级部门1',
            }, {
              value: 2,
              label: '一级部门2',
            }
          ]
        }, {
          value: 3,
          label: '二级部门',
          children: [
            {
              value: 4,
              label: '二级部门1',
            }, {
              value: 5,
              label: '二级部门2',
            }
          ]
        }
      ],
      option: {
        defaultExpandAll: true,
        formOption: {
          labelWidth: 100,
          column: [{
            label: '自定义项',
            prop: 'label'
          }],
        },
      }
    }
  },
  methods: {
    filterNodeMethod (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    tip (node, data) {
      this.$message.success(JSON.stringify(data))
    },
    del (data, done) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除回调')
        done();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    update (node, data, done, loading) {
      this.$message.success('更新回调')
      done();
    },
    save (node, data, done, loading) {
      this.$message.success('新增回调')
      this.form.id = new Date().getTime();
      this.form.value = new Date().getTime();
      this.form.children = [];
      done();
    }
  }
}
</script>
